---
slug: 2-5
title: Remotion 2.5
author: Jonny Burger
author_title: Remotion Creator
author_url: https://github.com/JonnyBurger
author_image_url: https://avatars2.githubusercontent.com/u/1629785?s=460&u=12eb94da6070d00fc924761ce06e3a428d01b7e9&v=4
image: /img/remotion-2-5.png
---

# Remotion 2.5

We are excited to announce a packed October release!
We did work in many areas and these improvements will surely boost your productivity!

## In/Out markers

You may know this feature from programs like After Effects and Davinci Resolve already. It is as simple as it is useful: You can set an “In” mark and an “Out” mark and the preview will only play whatever is in-between those timestamps. This makes it much easier to visually “debug” a section of the video without having to watch the whole thing.

<img src="/img/inout.gif" />

_Thanks to [Ankesh](https://github.com/remotion-dev/remotion/pull/631) for implementing this feature!_

## `<Loop>` component

Previously, in order to repeat content, you had to manually create a bunch of sequences and calculate the timestamps yourself. We added a helper called [`<Loop />`](/docs/loop) which will repeat it’s children either indefinitely or for a fixed number of times.
Another benefit is that we display the loop component cleanly in our timeline.

_Thanks to [Brian Pederson](https://github.com/remotion-dev/remotion/pull/638) for implementing this feature!_

## Support for different playback rates

You can now change the playback rate in the editor and play a video in slow-motion, in fast-forward, and even in reverse! We support speeds between -4x and 4x. This makes debugging animations that don’t look clean much easier.

It also works in the `<Player />`! See the new [`playbackRate`](/docs/player/player#playbackrate) prop and we also added a [`ratechange`](/docs/player/player#ratechange) event - just like the native HTML5 Video element.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/playbackrate.gif" />

_Thanks to [Brian Pederson](https://github.com/remotion-dev/remotion/pull/656) for implementing this feature!_

## Support for <kbd>J</kbd>, <kbd>K</kbd>, <kbd>L</kbd> keyboard shortcuts

These new shortcuts are super handy for navigating through a timeline. With the <kbd>L</kbd> key, you play the video as normal. Pressing the <kbd>L</kbd> key again will increase the speed to `2x`, and pressing <kbd>L</kbd> three times in total will play the video in `4x`.

The <kbd>J</kbd> key works the same, but plays the video backwards. Now you can reach any point in the video easily with just those two keys, even if the video is playing, without using the mouse.

Once you have reached the point where you want to pause the video and continue to code it, the <kbd>K</kbd> key will reset the playback rate to `1x` and pause the video.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/jkl.gif" />

Once you learn how to navigate using JKL keys, you'll never use your mouse for scrubbing again!

_Thanks to [Brian Pederson](https://github.com/remotion-dev/remotion/pull/656) for implementing this feature!_

:::tip
Press the <kbd>?</kbd> button to learn about all keyboard shortcuts!
:::

## `durationInFrames={Infinity}` is now optional

If you wanted to delay an element but not cap it’s duration, you had to explicitly specify `durationInFrames={Infinity}` . Not anymore! This is now the default and may be omitted.
If you upgrade the `@remotion/eslint-config` package as well, we will even automatically remove the prop when you have autofix enabled!

_Thanks to [Khalid Ansari](https://github.com/remotion-dev/remotion/pull/621) for implementing this feature!_

## Fig autocomplete

In case you don’t know [Fig](https://fig.io/), it is a free macOS application that provides autocomplete for the terminal. What sounds like a gimmick, actually works surprisingly well and I personally would miss it a lot if I didn’t have it!
The Remotion CLI that you can invoke using `npx remotion` now has full autocomplete support in Fig! You have to do nothing except install Fig.

<img src="/img/fig.gif" />

_Thanks to [Mattèo Gauthier](https://github.com/withfig/autocomplete/pull/633) for implementing this feature!_

## Node.JS 17 support

This version came out recently and broke almost every Webpack project because legacy crypto functions were removed.

We added the necessary modifications to our default Webpack config, and [even contributed a pull request to Webpack](https://github.com/webpack/webpack/pull/14557) to fix the last remaining bug that would break Remotion with Node 17! If you are upgrading Node, definitely make sure get this new version of Remotion.

## Monorepo migrated to `pnpm`

Contributors to Remotion would previously often struggle to correctly set up our monorepo. Indeed it was hard to correctly link all the packages and too easy to mess it up and run into error messages.

This is why we are happy to [have migrated to `pnpm`](https://github.com/remotion-dev/remotion/pull/627), which gets rid of the linking problems and also speeds up installation significantly. In your CI systems, we saw build times go down by 40%, which allows to iterate much more faster.

_Thanks to [Sergio Moreno](https://github.com/remotion-dev/remotion/pull/627) for implementing this migration!_

## “Empty” template

[A new template](https://github.com/remotion-dev/template-empty) has been added to `npm init video` / `yarn create video`: The blank template.
This template contains only the bare minimum Remotion boilerplate and a completely empty canvas. It is especially useful for people already familiar with Remotion who would like to skip deleting the Hello World project every time.

_Thanks to [Aneesh Relan](https://github.com/remotion-dev/remotion/pull/620) for creating this template!_

## Render video to `out` folder

Previously by default, a video would be rendered to `out.mp4` in the root directory of your project. This also meant that in order to ignore it from Git, we had a complicated `.gitignore` by default that would ignore video files in the root but inverse-ignore other video files.
Time to simplify: From now on, we render a file into an `out` folder by default and simply ignore that folder.

_Thanks to [ahmadrosid](https://github.com/remotion-dev/remotion/pull/618) for implementing this feature!_

## Updates to `@remotion/three`

A few interesting updates for users of `@remotion/three`:

- The Three Canvas is now wrapped in `<Suspense>` and the render is delayed until the content has been loaded (unsuspended). This works better with the React Three.JS ecosystem and now components such as `drei`’s `<Environment />` component will work out of the box.
- We now default to the `angle` OpenGL engine for Google Chrome, which we, through empirical testing, have found to have the best overall support for Three.JS content across platforms.

## More updates

- Added support for OTF fonts - _Thanks [William Candillon](https://github.com/remotion-dev/remotion/pull/637)_!
- Added possibility to customize `<Player>` error message - _Thanks [AudreyKj](https://github.com/remotion-dev/remotion/pull/654)_!
- Windows Node.JS 14 cleanup bug fixed - _Thanks [Raznov](https://github.com/remotion-dev/remotion/pull/634)_!
- Upgraded Docusaurus to the newest version, obtaining the newest features and layouts

## Hacktoberfest Roundup

We opted into participating in Hacktoberfest, and put $100 bounties on [11 issues](https://github.com/remotion-dev/remotion/issues?q=+label%3A%22%F0%9F%A5%A8++hacktoberfest%22+) as an extra incentive!
Every single of those issue has been picked up and solved! Every contributor did a great job, many greatly surpassing our expectations!

Thank you everybody who participated and contributed to this release!
